<template>
    <view class="box">
        <!-- 学生基本信息 -->
        <view class="info-card" v-if="showStudentCard">
            <view 
                class="info-item" 
                v-for="(item, index) in studentFields" 
                :key="'stu_'+index"
            >
                <view class="label-container">
                    <text class="label">{{ item.label }}</text>
                </view>
                <text class="value" :class="!item.value && 'empty'">
                    {{ item.displayValue }}
                </text>
            </view>
        </view>

        <!-- 请假信息 -->
        <view class="info-card" v-if="showLeaveCard">
            <view 
                class="info-item" 
                v-for="(item, index) in leaveFields" 
                :key="'leave_'+index"
            >
                <view class="label-container">
                    <text class="label">{{ item.label }}</text>
                </view>
                <text class="value" :class="!item.value && 'empty'">
                    {{ item.displayValue }}
                </text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "student-Info",
    props: {
        studentInfo: {
            type: Object,
            default: () => ({})
        },
        leaveInfo: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        showStudentCard() {
            return Object.keys(this.studentInfo).length > 0
        },
        showLeaveCard() {
            return this.leaveInfo && Object.keys(this.leaveInfo).length > 0
        },
        studentFields() {
            return [
                { 
                    label: '学号', 
                    value: this.studentInfo.studentId,
                    displayValue: this.studentInfo.studentId || '未设置'
                },
                {
                    label: '姓名',
                    value: this.studentInfo.studentName,
                    displayValue: this.studentInfo.studentName || '未设置'
                },
                {
                    label: '性别',
                    value: this.studentInfo.gender,
                    displayValue: this.formatGender(this.studentInfo.gender)
                },
                {
                    label: '年龄',
                    value: this.studentInfo.age,
                    displayValue: this.studentInfo.age ?? '未设置'
                },
                {
                    label: '电话号码',
                    value: this.studentInfo.phoneNumber,
                    displayValue: this.studentInfo.phoneNumber || '未设置'
                },
                {
                    label: '家长电话',
                    value: this.studentInfo.familyNumber,
                    displayValue: this.studentInfo.familyNumber || '未设置'
                },
                {
                    label: '所属院系',
                    value: this.studentInfo.department,
                    displayValue: this.formatDepartment(this.studentInfo.department)
                }
            ]
        },
        leaveFields() {
            if (!this.leaveInfo) return []
            return [
                {
                    label: '学生ID',
                    value: this.leaveInfo.studentId,
                    displayValue: this.leaveInfo.studentId || '--'
                },
                {
                    label: '学生姓名',
                    value: this.leaveInfo.studentName,
                    displayValue: this.leaveInfo.studentName || '--'
                },
                {
                    label: '班级',
                    value: this.leaveInfo.className,
                    displayValue: this.leaveInfo.className || '--'
                },
                {
                    label: '申请时间',
                    value: this.leaveInfo.applyTime,
                    displayValue: this.formatTime(this.leaveInfo.applyTime)
                },
                {
                    label: '开始时间',
                    value: this.leaveInfo.startTime,
                    displayValue: this.formatTime(this.leaveInfo.startTime)
                },
                {
                    label: '结束时间',
                    value: this.leaveInfo.endTime,
                    displayValue: this.formatTime(this.leaveInfo.endTime)
                },
                {
                    label: '请假原因',
                    value: this.leaveInfo.message,
                    displayValue: this.leaveInfo.message || '--'
                },
                {
                    label: '审批状态',
                    value: this.leaveInfo.status,
                    displayValue: this.getStatusText(this.leaveInfo.status)
                }
            ]
        }
    },
    methods: {
        formatGender(gender) {
            const map = { 1: '男', 2: '女' }
            return map[gender] || '未选择'
        },
        formatDepartment(department) {
            return department ? `${department}`.trim() : '未设置'
        },
        getStatusText(status) {
            const statusMap = { 0: "待审核", 1: "已批准", 2: "已驳回" }
            return statusMap[status] || "未知状态"
        },
        formatTime(timeString) {
            if (!timeString) return '未设置'
            return timeString.replace("T", " ").slice(0, 16)
        }
    }
};
</script>

<style>
	@import url("css/student-Info.css");
</style>